<template>
    <div class="text-center pa-4">
        <v-dialog :model-value="display" transition="dialog-bottom-transition" fullscreen>
            <v-card>
                <v-toolbar>
                    <v-btn icon="mdi-close" @click="onClose"></v-btn>

                    <v-toolbar-title>股票信息查询</v-toolbar-title>

                    <v-toolbar-items>
                        <v-btn text="添加" variant="text" @click="onSave"></v-btn>
                    </v-toolbar-items>
                </v-toolbar>

                <div>
                    <v-divider :thickness="3"></v-divider>
                    <v-row>
                        <v-col cols="4">
                            <v-text-field append-inner-icon="mdi-magnify" density="compact" label="Search templates"
                                variant="solo" hide-details single-line></v-text-field>

                        </v-col>
                    </v-row>
                    <v-divider :thickness="3"></v-divider>

                    <v-data-table-virtual :headers="headers" :items="virtualBoats" height="800" item-value="name"
                        fixed-header show-select v-model="selected">

                        <template v-slot:item.data-table-expand="{ internalItem, isExpanded, toggleExpand }"
                            :append-icon="isExpanded(internalItem) ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                            :text="isExpanded(internalItem) ? '折叠起来' : '更多详情'" @click="toggleExpand(internalItem)">
                            <v-btn
                                :append-icon="isExpanded(internalItem) ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                                :text="isExpanded(internalItem) ? '折叠起来' : '更多详情'" class="text-none"
                                color="medium-emphasis" size="small" variant="text" border slim
                                @click="toggleExpand(internalItem)"></v-btn>
                        </template>

                        <template v-slot:expanded-row="{ columns, item }">
                            <tr>
                                <td :colspan="columns.length" class="py-2">
                                    <v-sheet rounded="lg" border>
                                        <v-table density="compact">
                                            <tbody class="bg-surface-light">
                                                <tr>
                                                    <th>Rating</th>
                                                    <th>Synopsis</th>
                                                    <th>Cast</th>
                                                </tr>
                                            </tbody>

                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <v-rating :model-value="item.details.rating"
                                                            color="orange-darken-2" density="comfortable" size="x-small"
                                                            half-increments readonly></v-rating>
                                                    </td>
                                                    <td>{{ item.details.synopsis }}</td>
                                                    <td>{{ item.details.cast.join(', ') }}</td>
                                                </tr>
                                            </tbody>
                                        </v-table>
                                    </v-sheet>
                                </td>
                            </tr>
                        </template>

                    </v-data-table-virtual>
                </div>

            </v-card>
        </v-dialog>
    </div>
</template>
<script lang="ts" setup>
const selected = ref([]);

const headers = [
    { title: 'Boat Type', align: 'start' as const, key: 'name' },
    { title: 'Speed(knots)', align: 'start' as const, key: 'speed' },
    { title: 'Length(m)', align: 'start' as const, key: 'length' },
    { title: 'Price($)', align: 'start' as const, key: 'price', value: (item: { price: any }) => formatPrice(item.price) },
    { title: 'Year', align: 'start' as const, key: 'year' },
    { title: '详情', align: 'start' as const, key: 'data-table-expand' },
]
const boats = [
    {
        name: 'Speedster',
        speed: 35,
        length: 22,
        price: 300000,
        year: 2021,
        details: {
            rating: "",
            synopsis: "",
            cast: [],
        }
    },
    {
        name: 'OceanMaster',
        speed: 25,
        length: 35,
        price: 500000,
        year: 2020,
        details: {
            rating: "",
            synopsis: "",
            cast: [],
        }
    },
    {
        name: 'Voyager',
        speed: 20,
        length: 45,
        price: 700000,
        year: 2019,
        details: {
            rating: "",
            synopsis: "",
            cast: [],
        }
    },
    {
        name: 'WaveRunner',
        speed: 40,
        length: 19,
        price: 250000,
        year: 2022,
        details: {
            rating: "",
            synopsis: "",
            cast: [],
        }
    },
    {
        name: 'SeaBreeze',
        speed: 28,
        length: 31,
        price: 450000,
        year: 2018,
        details: {
            rating: "",
            synopsis: "",
            cast: [],
        }
    },
    {
        name: 'HarborGuard',
        speed: 18,
        length: 50,
        price: 800000,
        year: 2017,
        details: {
            rating: "",
            synopsis: "",
            cast: [],
        }
    },
    {
        name: 'SlickFin',
        speed: 33,
        length: 24,
        price: 350000,
        year: 2021,
        details: {
            rating: "",
            synopsis: "",
            cast: [],
        }
    },
    {
        name: 'StormBreaker',
        speed: 22,
        length: 38,
        price: 600000,
        year: 2020,
        details: {
            rating: "",
            synopsis: "",
            cast: [],
        }
    },
    {
        name: 'WindSail',
        speed: 15,
        length: 55,
        price: 900000,
        year: 2019,
        details: {
            rating: "",
            synopsis: "",
            cast: [],
        }
    },
    {
        name: 'FastTide',
        speed: 37,
        length: 20,
        price: 280000,
        year: 2022,
        details: {
            rating: "",
            synopsis: "",
            cast: [],
        }
    },
]
const virtualBoats = computed(() => {
    return [...Array(10000).keys()].map(i => {
        const boat = { ...boats[i % 10] }
        boat.name = `${boat.name} #${i}`
        return boat
    })
})

function formatPrice(value: number) {
    return `$${value.toFixed(0).replace(/\d(?=(\d{3})+$)/g, '$&,')}`
}

const props = defineProps({
    updateValue: {
        type: Function,
        default: () => (): boolean => false
    },
    close: {
        type: Function,
        default: () => (): boolean => false,
    },
    display: {
        type: Boolean,
        default: false
    }
});

function onClose() {
    props.close()
}

function onSave() {
    props.close();
    console.log('----selected.value--->', selected.value);
}
</script>
<style lang="css">
.search-result-section {
    height: 400px;
}
</style>